<template>
    <view class="container">
      <view class="title">驾校报名申请</view>
      
      <view class="form-container">
        <view class="step-container">
          <view class="step-item" :class="{ active: currentStep >= 1, completed: currentStep > 1 }">
            <view class="step-number">1</view>
            <view class="step-name">个人信息</view>
          </view>
          <view class="step-line" :class="{ active: currentStep > 1 }"></view>
          <view class="step-item" :class="{ active: currentStep >= 2, completed: currentStep > 2 }">
            <view class="step-number">2</view>
            <view class="step-name">选择驾照类型</view>
          </view>
          <view class="step-line" :class="{ active: currentStep > 2 }"></view>
          <view class="step-item" :class="{ active: currentStep >= 3, completed: currentStep > 3 }">
            <view class="step-number">3</view>
            <view class="step-name">提交申请</view>
          </view>
        </view>
        
        <!-- 步骤1：个人信息 -->
        <view class="step-content" v-if="currentStep === 1">
          <view class="form-group">
            <view class="form-label">真实姓名</view>
            <input 
              class="input" 
              type="text" 
              v-model="form.realName" 
              placeholder="请输入真实姓名" 
            />
          </view>
          
          <view class="form-group">
            <view class="form-label">身份证号</view>
            <input 
              class="input" 
              type="idcard" 
              v-model="form.idCard" 
              placeholder="请输入身份证号" 
              maxlength="18"
            />
          </view>
          
          <view class="form-group">
            <view class="form-label">手机号</view>
            <input 
              class="input" 
              type="number" 
              v-model="form.phone" 
              placeholder="请输入手机号" 
              maxlength="11"
            />
          </view>
          
          <view class="form-group">
            <view class="form-label">性别</view>
            <radio-group @change="handleGenderChange">
              <label class="radio-label">
                <radio value="male" :checked="form.gender === 'male'" />男
              </label>
              <label class="radio-label">
                <radio value="female" :checked="form.gender === 'female'" />女
              </label>
            </radio-group>
          </view>
          
          <view class="form-group">
            <view class="form-label">出生日期</view>
            <picker 
              mode="date" 
              :value="form.birthday" 
              start="1950-01-01" 
              :end="getCurrentDate()" 
              @change="handleBirthdayChange"
            >
              <view class="picker-value">
                {{ form.birthday || '请选择出生日期' }}
              </view>
            </picker>
          </view>
          
          <view class="form-group">
            <view class="form-label">居住地址</view>
            <textarea 
              class="textarea" 
              v-model="form.address" 
              placeholder="请输入详细地址" 
            />
          </view>
        </view>
        
        <!-- 步骤2：选择驾照类型 -->
        <view class="step-content" v-if="currentStep === 2">
          <view class="license-tip">请选择您要报考的驾照类型</view>
          
          <view class="license-list">
            <view 
              class="license-item" 
              :class="{ active: form.licenseType === item.value }" 
              v-for="(item, index) in licenseTypes" 
              :key="index"
              @click="form.licenseType = item.value"
            >
              <view class="license-code">{{ item.value }}</view>
              <view class="license-name">{{ item.label }}</view>
            </view>
          </view>
          
          <view class="license-detail" v-if="form.licenseType">
            <view class="license-detail-title">驾照类型说明</view>
            <view class="license-detail-content">
              {{ getLicenseDescription(form.licenseType) }}
            </view>
            <view class="license-price">
              <text>学费：</text>
              <text class="price">{{ getLicensePrice(form.licenseType) }}</text>
            </view>
          </view>
        </view>
        
        <!-- 步骤3：提交申请 -->
        <view class="step-content" v-if="currentStep === 3">
          <view class="confirm-title">信息确认</view>
          
          <view class="confirm-list">
            <view class="confirm-item">
              <text class="confirm-label">姓名：</text>
              <text class="confirm-value">{{ form.realName }}</text>
            </view>
            <view class="confirm-item">
              <text class="confirm-label">身份证号：</text>
              <text class="confirm-value">{{ maskIdCard(form.idCard) }}</text>
            </view>
            <view class="confirm-item">
              <text class="confirm-label">手机号：</text>
              <text class="confirm-value">{{ maskPhone(form.phone) }}</text>
            </view>
            <view class="confirm-item">
              <text class="confirm-label">性别：</text>
              <text class="confirm-value">{{ form.gender === 'male' ? '男' : '女' }}</text>
            </view>
            <view class="confirm-item">
              <text class="confirm-label">出生日期：</text>
              <text class="confirm-value">{{ form.birthday }}</text>
            </view>
            <view class="confirm-item">
              <text class="confirm-label">居住地址：</text>
              <text class="confirm-value">{{ form.address }}</text>
            </view>
            <view class="confirm-item">
              <text class="confirm-label">驾照类型：</text>
              <text class="confirm-value">{{ getLicenseLabel(form.licenseType) }}</text>
            </view>
            <view class="confirm-item">
              <text class="confirm-label">学费：</text>
              <text class="confirm-value price">{{ getLicensePrice(form.licenseType) }}</text>
            </view>
          </view>
          
          <view class="agreement">
            <checkbox 
              :checked="agreeProtocol" 
              @click="agreeProtocol = !agreeProtocol"
            ></checkbox>
            <text class="agreement-text">
              我已阅读并同意
              <text class="link" @click="showProtocol">《学员报名协议》</text>
              和
              <text class="link" @click="showPrivacy">《隐私政策》</text>
            </text>
          </view>
        </view>
        
        <view class="button-group">
          <button 
            class="btn-default" 
            v-if="currentStep > 1" 
            @click="prevStep"
          >
            上一步
          </button>
          <button 
            class="btn-primary" 
            v-if="currentStep < 3" 
            @click="nextStep"
          >
            下一步
          </button>
          <button 
            class="btn-success" 
            v-if="currentStep === 3" 
            :loading="loading" 
            :disabled="loading || !agreeProtocol" 
            @click="submitEnrollment"
          >
            提交申请
          </button>
        </view>
      </view>
    </view>
  </template>
  
  <script>
  import { mapActions } from 'vuex';
  import { isPhone, isIdCard, isEmpty } from '@/utils/validator';
  import { getCurrentDate } from '@/utils/date';
  import config from '@/config/index';
  
  export default {
    data() {
      return {
        currentStep: 1,
        form: {
          realName: '',
          idCard: '',
          phone: '',
          gender: 'male',
          birthday: '',
          address: '',
          licenseType: ''
        },
        licenseTypes: config.licenseTypes,
        agreeProtocol: false,
        loading: false
      };
    },
    methods: {
      ...mapActions('enrollment', [
        'submitEnrollment'
      ]),
      getCurrentDate,
      handleGenderChange(e) {
        this.form.gender = e.target.value;
      },
      handleBirthdayChange(e) {
        this.form.birthday = e.target.value;
      },
      prevStep() {
        if (this.currentStep > 1) {
          this.currentStep--;
        }
      },
      nextStep() {
        if (this.currentStep === 1) {
          // 验证第一步表单
          if (isEmpty(this.form.realName)) {
            this.showToast('请输入真实姓名');
            return;
          }
          
          if (!isIdCard(this.form.idCard)) {
            this.showToast('请输入正确的身份证号');
            return;
          }
          
          if (!isPhone(this.form.phone)) {
            this.showToast('请输入正确的手机号');
            return;
          }
          
          if (isEmpty(this.form.birthday)) {
            this.showToast('请选择出生日期');
            return;
          }
          
          if (isEmpty(this.form.address)) {
            this.showToast('请输入居住地址');
            return;
          }
        } else if (this.currentStep === 2) {
          // 验证第二步表单
          if (isEmpty(this.form.licenseType)) {
            this.showToast('请选择驾照类型');
            return;
          }
        }
        
        if (this.currentStep < 3) {
          this.currentStep++;
        }
      },
      showProtocol() {
        uni.navigateTo({
          url: '/pages/common/enrollment-protocol'
        });
      },
      showPrivacy() {
        uni.navigateTo({
          url: '/pages/common/privacy'
        });
      },
      getLicenseDescription(type) {
        const descriptions = {
          'A1': 'A1驾照允许驾驶大型客车，总质量为5吨以上的载货汽车以及所挂接的挂车，8座以上的载客汽车，是国家核发的最高级汽车驾驶证。',
          'A2': 'A2驾照允许驾驶重型、中型全挂、半挂汽车列车，重型、中型全挂、半挂货车，是国家核发的最高级货车驾驶证。',
          'B1': 'B1驾照允许驾驶中型客车，总质量为5吨以上，10吨以下的载货汽车以及所挂接的挂车，8座以上，20座以下的载客汽车。',
          'B2': 'B2驾照允许驾驶重型、中型载货汽车，大、中型专项作业车。',
          'C1': 'C1驾照允许驾驶小型、微型载客汽车以及轻型、微型载货汽车，5座以下的小型轿车。',
          'C2': 'C2驾照允许驾驶小型、微型自动挡载客汽车以及轻型、微型自动挡载货汽车。',
          'D': 'D驾照允许驾驶三轮摩托车。',
          'E': 'E驾照允许驾驶二轮摩托车。',
          'F': 'F驾照允许驾驶轻便摩托车。'
        };
        return descriptions[type] || '暂无描述';
      },
      getLicensePrice(type) {
        const prices = {
          'A1': '￥8,000',
          'A2': '￥8,000',
          'B1': '￥7,000',
          'B2': '￥7,000',
          'C1': '￥5,000',
          'C2': '￥4,800',
          'D': '￥2,000',
          'E': '￥1,800',
          'F': '￥1,500'
        };
        return prices[type] || '￥0';
      },
      getLicenseLabel(type) {
        const license = this.licenseTypes.find(item => item.value === type);
        return license ? license.label : type;
      },
      maskIdCard(idCard) {
        if (!idCard) return '';
        return idCard.replace(/^(.{6})(.*)(.{4})$/, '$1********$3');
      },
      maskPhone(phone) {
        if (!phone) return '';
        return phone.replace(/^(.{3})(.*)(.{4})$/, '$1****$3');
      },
      submitEnrollment() {
        if (!this.agreeProtocol) {
          this.showToast('请同意学员报名协议和隐私政策');
          return;
        }
        
        this.loading = true;
        
        const enrollmentData = {
          real_name: this.form.realName,
          id_card: this.form.idCard,
          phone: this.form.phone,
          gender: this.form.gender,
          birthday: this.form.birthday,
          address: this.form.address,
          license_type: this.form.licenseType
        };
        
        this.submitEnrollment(enrollmentData)
          .then(res => {
            this.showToast('报名申请提交成功', 'success');
            // 延迟跳转，让用户看到提示
            setTimeout(() => {
              uni.redirectTo({
                url: `/pages/enrollment/materials/materials?id=${res.data.id}`
              });
            }, 1500);
          })
          .catch(err => {
            this.showToast(err.message || '报名申请提交失败');
          })
          .finally(() => {
            this.loading = false;
          });
      }
    }
  };
  </script>
  
  <style lang="scss">
  .container {
    padding: 30rpx;
  }
  
  .title {
    font-size: 36rpx;
    font-weight: bold;
    text-align: center;
    margin-bottom: 40rpx;
  }
  
  .form-container {
    background-color: #fff;
    border-radius: 10rpx;
    padding: 30rpx;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  }
  
  .step-container {
    display: flex;
    align-items: center;
    margin-bottom: 50rpx;
  }
  
  .step-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
  }
  
  .step-number {
    width: 60rpx;
    height: 60rpx;
    line-height: 60rpx;
    text-align: center;
    border-radius: 50%;
    background-color: #eee;
    color: #999;
    margin-bottom: 10rpx;
    font-size: 28rpx;
  }
  
  .step-name {
    font-size: 24rpx;
    color: #999;
  }
  
  .step-line {
    height: 2rpx;
    flex: 1;
    background-color: #eee;
    margin: 0 10rpx;
  }
  
  .step-item.active .step-number {
    background-color: #3c8dbc;
    color: #fff;
  }
  
  .step-item.active .step-name {
    color: #3c8dbc;
  }
  
  .step-item.completed .step-number {
    background-color: #4cd964;
    color: #fff;
  }
  
  .step-line.active {
    background-color: #3c8dbc;
  }
  
  .step-content {
    margin-bottom: 30rpx;
  }
  
  .form-group {
    margin-bottom: 30rpx;
  }
  
  .form-label {
    font-size: 28rpx;
    color: #666;
    margin-bottom: 10rpx;
  }
  
  .input {
    width: 100%;
    height: 90rpx;
    line-height: 90rpx;
    padding: 0 20rpx;
    font-size: 28rpx;
    color: #333;
    border: 1px solid #ddd;
    border-radius: 8rpx;
    box-sizing: border-box;
  }
  
  .textarea {
    width: 100%;
    height: 180rpx;
    padding: 20rpx;
    font-size: 28rpx;
    color: #333;
    border: 1px solid #ddd;
    border-radius: 8rpx;
    box-sizing: border-box;
  }
  
  .radio-label {
    margin-right: 40rpx;
    font-size: 28rpx;
  }
  
  .picker-value {
    width: 100%;
    height: 90rpx;
    line-height: 90rpx;
    padding: 0 20rpx;
    font-size: 28rpx;
    color: #333;
    border: 1px solid #ddd;
    border-radius: 8rpx;
    box-sizing: border-box;
  }
  
  .license-tip {
    font-size: 28rpx;
    color: #666;
    margin-bottom: 30rpx;
  }
  
  .license-list {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 30rpx;
  }
  
  .license-item {
    width: 30%;
    height: 160rpx;
    margin-right: 5%;
    margin-bottom: 30rpx;
    border: 1px solid #ddd;
    border-radius: 8rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
  }
  
  .license-item:nth-child(3n) {
    margin-right: 0;
  }
  
  .license-item.active {
    border-color: #3c8dbc;
    background-color: #f0f9ff;
  }
  
  .license-code {
    font-size: 40rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 20rpx;
  }
  
  .license-name {
    font-size: 24rpx;
    color: #666;
  }
  
  .license-detail {
    padding: 30rpx;
    background-color: #f8f8f8;
    border-radius: 8rpx;
    margin-bottom: 30rpx;
  }
  
  .license-detail-title {
    font-size: 32rpx;
    font-weight: bold;
    margin-bottom: 20rpx;
  }
  
  .license-detail-content {
    font-size: 28rpx;
    color: #666;
    line-height: 1.6;
    margin-bottom: 20rpx;
  }
  
  .license-price {
    font-size: 28rpx;
  }
  
  .price {
    color: #f56c6c;
    font-weight: bold;
  }
  
  .confirm-title {
    font-size: 32rpx;
    font-weight: bold;
    margin-bottom: 30rpx;
    text-align: center;
  }
  
  .confirm-list {
    margin-bottom: 30rpx;
  }
  
  .confirm-item {
    display: flex;
    padding: 20rpx 0;
    border-bottom: 1px solid #eee;
  }
  
  .confirm-label {
    width: 160rpx;
    font-size: 28rpx;
    color: #666;
  }
  
  .confirm-value {
    flex: 1;
    font-size: 28rpx;
    color: #333;
  }
  
  .agreement {
    display: flex;
    align-items: center;
    margin-bottom: 30rpx;
  }
  
  .agreement-text {
    font-size: 26rpx;
    color: #666;
    margin-left: 10rpx;
  }
  
  .link {
    color: #3c8dbc;
  }
  
  .button-group {
    display: flex;
    justify-content: space-between;
  }
  
  .btn-default, .btn-primary, .btn-success {
    flex: 1;
    height: 90rpx;
    line-height: 90rpx;
    font-size: 32rpx;
    border-radius: 8rpx;
  }
  
  .btn-default {
    color: #666;
    background-color: #f8f8f8;
    border: 1px solid #ddd;
    margin-right: 20rpx;
  }
  
  .btn-primary {
    color: #fff;
    background-color: #3c8dbc;
  }
  
  .btn-success {
    color: #fff;
    background-color: #4cd964;
  }
  </style>